<?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

$this->title = '上传护照资料';
$this->params['breadcrumbs'][] = $this->title;
?>

<style type="text/css">
	.title{padding: 15px;background-color: #FFFFFF;text-align: center;font-size:16px;}
	.title-1{padding: 10px;background-color: #FFFFFF;font-size: 16px;border-top:1px solid #ddd;color: #a664a6;}
	.room-title{padding: 10px;background-color: #FFFFFF;font-size: 14px;border-top:1px solid #ddd;color: #FDAD38;height: 58px;line-height: 34px;}
	.room-detail .customer{padding: 20px;background-color: #FFFFFF;border-top:1px solid #ddd;font-size: 13px;}
	.file{font-size: 16px;width:100%;
    height: 32px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    cursor: pointer;}
    .upload-container img{width:100%;}
    .a-upload  input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }
    .a-upload {
        background: -webkit-linear-gradient(left,#a664a6,#dea0c7);
        background: linear-gradient(to right,#a664a6,#dea0c7);
        padding: 8px 24px;
        height: 32px;
        line-height: 18px;
        position: relative;
        cursor: pointer;
        color: #FFFFFF;
        //background: #a664a6;
        //border: 1px solid #dea0c7;
        border-radius: 15px;
        overflow: hidden;
        display: inline-block;
        //display: inline;
        //zoom: 1
    }
    .a-upload:hover {
        color: #FFFFFF;
        text-decoration: none
    }
    .upload-img{background: #FFFFFF;width: 100%;text-align: center;margin-top: 10px;}
    .upload-img img{width:100%;}
    .upload-img p{position: absolute;bottom: 0;display: block;margin: 0;padding: 10px;
    text-align: center;
    width: 100%;
    background: #1488F5;
    color: #FFF;
    opacity:0.6;}

    .mui-btn-pink{background-color: #a664a6;border:1px solid #a664a6;color: #FFFFFF;}
    .layer-row{margin-top: 10px;}
    .layer-row label{width: 30%;float: left;line-height: 34px;}
    .layer-row input{width: 60%;height: 16px;float: left;}
    .layer-row .box{width: 65%}

    .out-set-btn{height: 34px;line-height: 20px;}
    h3{margin: 0}
    .layui-m-layercont{padding: 10px 10px;}
</style>

	
<div class="mui-content">

	<input type="hidden" name="user_id" id="user_id" value="<?=\Yii::$app->user->identity->id?>">

	<div class="title">
		<?=$model->product->name?>
	</div>

	<div class="title-1">
		上传护照资料
	</div>

	<div class="room-detail">
		<?php if(!empty($model->room)){ ?>

			<?php foreach($model->room as $r){ ?>

				<?php if($model->product->stock == 1){ //标准模式?> 
					<div class="room-title"><?=sprintf("房间类型：%s%s",$r->productRoom->room->name,$r->productRoom->room->code)?><div class="mui-pull-right">
                        <button class="mui-btn-pink out-set-btn" 
                            data-room-name="<?=$r->productRoom->room->name.$r->productRoom->room->code?>"
                            data-order-id="<?=$model->id;?>" 
                            data-room-id ="<?=$r->id?>" >
                                        添加客户</button></div></div>
					<?php }else if($model->product->stock == 2){//自定义模式?>
					<?php $rooms = json_decode($model->product->rooms,true);?>
				 		<div class="room-title">房间类型：<?=$rooms[$r->room_id]['name']?><div class="mui-pull-right"><button class="mui-btn-pink out-set-btn" 
                                    data-room-name="<?=$rooms[$r->room_id]['name']?>"
                                    data-order-id="<?=$model->id?>"
                                    data-room-id="<?=$r->id?>" >
                                        添加客户</button></div></div>
				 	<?php }?>


				 	<?php $cust = yii\helpers\ArrayHelper::map($r->orderRoomCustomer, 'id', 'customer_id');
								 	?>
						 <?php foreach($model->customer as $c){ ?>
						  	<?php if(in_array($c->id,$cust)){ ?>
						  	<div class="mui-row customer">
						 		<div class="mui-col-xs-6" style="font-size: 16px;color: #333"><?=sprintf("%s%s",$c->first_name,$c->last_name)?><br><span style="color:#42A7EB"><?=$c->phone?></span></div>
						 		<div class="mui-col-xs-6">
    						 	    <a href="javascript:;" class="a-upload mui-pull-right"><input class="file"  data-id="<?=$c->id?>" type="file" accept="image/*" name="file[]" />
                                        <?php if(!empty($c->passport_img)){ ?>
                                            <span class="up-text">更换</span>
                                        <?php }else{ ?>
                                            <span class="up-text">上传</span>
                                        <?php }?>    
                                        </a>
						 		</div>
                                <div class="mui-col-xs-12 upload-img">
                                    <?php if(!empty($c->passport_img)){ ?>
                                        <img src="<?="/".$c->passport_img?>">
                                    <?php }?>
                                </div>  
						 	</div>
                            
						 	<?php }?>	
						 <?php }?>
					
			<?php }?>

		<?php }?>
	</div>


</div>


<?= yii\web\View::registerJsFile("/js/localResizeIMG/lrz.all.bundle.js",['depends' => 'app\assets\MuiAsset']) ?>
<?= yii\web\View::registerJsFile("/js/layer_mobile/layer.js",['depends' => 'app\assets\MuiAsset']) ?>
<?php app\components\JsBlock::begin() ?>
<script type="text/javascript">
 mui.init({});
 
 mui('body').on('tap','a[data-link="as"]',function(){document.location.href=this.href;return false});


mui("body").on('tap','.out-set-btn',function(){
    var title = jQuery(this).attr("data-room-name");
    var order_id = jQuery(this).attr("data-order-id");
    var order_room_id = jQuery(this).attr("data-room-id");

    var member_id = jQuery("#user_id").val();
    if(!member_id){
        mui.toast("没有登录");
        return false;
    }
    var html = "<form id='out-form'>"+
        "<input type='hidden' name='order_id' value='"+order_id+"'>"+
        "<input type='hidden' name='order_room_id' value='"+order_room_id+"'>"+      
        "<div class='layer-row'><label>中文姓：</label>"+
        "<input type='text' name='first_name' value=''></div>"+  
        "<div class='layer-row'><label>中文名：</label>"+
        "<input type='text' name='last_name' value=''></div>"+    
        "</form>";
    layer.open({
      title: [
        title+'添加客户姓名',
        'background-color:#a664a6; color:#fff;'
      ]
      ,anim: 'up'
      ,content: html
      ,btn: ['确认', '取消'],
      yes: function(){
            $.ajax({
                   type: "get",
                   async:false, 
                   url: "/member/member/create-customer",
                   data: $('#out-form').serialize(),
                   success: function(res){
                       console.log(res);
                       var res = $.parseJSON(res);
                       if(res.code == 0){
                            mui.toast(res.msg);
                            layer.closeAll();
                            window.location.reload();
                            return false;       
                        }else if(res.code == 1){
                            mui.toast(res.msg);
                            layer.closeAll();
                            window.location.reload();       
                        }

                   },
                   error:function(){
                      mui.toast("添加失败");
                      layer.closeAll();
                      window.location.reload();
                   }
            });
      }

    });


})

jQuery('.file').each(function(){
        
    $(this).change(function () {

        var that = this;
        var customer_id = $(this).attr("data-id");
        var upc = $(this).parents(".customer").children(".upload-img");
        var upText = $(this).next(".up-text");
        lrz(that.files[0], {
            width: 800
        }).then(function (rst) {
            var img = new Image(),
                p = document.createElement('p');
                p.innerHTML = "上传成功";
                img.src = rst.base64;
                $.ajax({
                   type:"post",
                   async:false, 
                   url: "/member/member/upload",
                   data: {"base64_string":img.src,"id":customer_id},
                   success: function(res){
                        var res = $.parseJSON(res);
                        if(res.status == 1){
                            console.log(p);
                            upc.empty();
                            img.src = "/"+res.url;
                            upc.append(img);
                            upc.append(p);
                            upText.html("更换");
                        }
                   }
                });
                return rst;
            });
        });

});


function toFixed2 (num) {
    return parseFloat(+num.toFixed(2));
}

</script>

<?php app\components\JsBlock::end() ?>
